@use 'c01';

@mixin bg-gradient {
	  background: linear-gradient(-45deg, rgba(238, 119, 82, 0.08), rgba(231, 60, 126, 0.08), rgba(35, 166, 213, 0.08), rgba(35, 213, 171, 0.08));
	  background-size: 400% 400%;
	  animation: gradient 15s ease infinite;
}

@keyframes gradient {
	  0% {
		    background-position: 0% 50%;
	  }
	  50% {
		    background-position: 100% 50%;
	  }
	  100% {
		    background-position: 0% 50%;
	  }
}


:root {
    --el-fill-color-blank: #ffffff22; /*🦜 : make it transparent*/
    --el-color-primary: #5b3269;
    --el-color-primary-light-5: #d8c2e0;
    --el-color-primary-light-7: #c4a6d5;
    --el-color-primary-light-9: #f7e9f4;
    --el-color-success: #43947a;
    /* --el-color-info: #7ab9f0; */
    --el-color-warning: #f09a7a;

    // @include bg-gradient;
}

.el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-light-9);
}

.d0 {
    padding-left: 50px;
    width: 85%;
}/* the panel */

.el-table {
    /* background-color:rgba(0, 0, 0, 0.5)!important */
    /* background-color: transparent!important; */
    /* opacity: .9; */
    --el-table-bg-color: #ffffff00;
    --el-table-tr-bg-color: #ffffff00;
    --el-table-expanded-cell-bg-color: #ffffff00;
    --el-table-text-color: #17233b;
    --el-table-header-text-color: #17233b;
    --el-table-header-bg-color: #6397af24;
}


/* .el-table > * {
    opacity: 1;
    }
*/
.el-table .d1 { 
    /* The more-info section: add border-bottom */
    border-bottom: 1px solid var(--el-color-primary-light-9);
    margin-bottom: 10px;/* beyond border */
    padding-bottom: 5px;/*  within boarder*/
    opacity: 100%;
}


.anim {
    position: fixed;
    /* 🦜: maybe absolute is easier.. */
    width: 2200px;
    height: 2200px;
    bottom: -95vh;
    left: 40vw;
    opacity: 100%;
    z-index: -1;
}

.anim1 {
    position: fixed;
    width: 800px;
    height: 800px;
    bottom: -15vh;
    left: 60vw;
    opacity: 0%;
    z-index: -1;
}

.pagination-container {
    background-color: rgba(0, 0, 0, 0)!important;
    /* set make the pagination bar transparent */
}

.anim.r1 {
    width: 1300px;
    height: 1300px;
    top: -70vh;
    left: 50vw;
    rotate: 90deg;
    opacity: 10%;
}

.anim.r2{
    width: 700px;
    height: 700px;
    top: 0vh;
    left: 0vw;
    opacity: 0%;
}

.anim.r3{
    top: -10vh;
    left: 20vw;
    opacity: 0%;
}
